<template>
  <div>
    <div
      class="fixedBox"
      v-if="tempData.position == 1"
      style="position: absolute; top: 100px; left: 20px; z-index: 100"
      :style="{
        paddingBottom: tempData.paddingBottom + 'px',
        paddingLeft: tempData.paddingTwice + 'px',
        paddingRight: tempData.paddingTwice + 'px',
        paddingTop: tempData.paddingTop + 'px',
        boxSizing: 'border-box',
      }"
    >
      <img
        :src="tempData.imageUrl"
        style="width: 50px; height: 50px"
        :style="{
          borderTopLeftRadius: tempData.radiusNumTop + 'px',
          borderTopRightRadius: tempData.radiusNumTop + 'px',
          borderBottomLeftRadius: tempData.radiusNumBottom + 'px',
          borderBottomRightRadius: tempData.radiusNumBottom + 'px',
        }"
        alt=""
      />
    </div>
    <div
      class="fixedBox"
      v-if="tempData.position == 2"
      style="position: absolute; bottom: 100px; left: 20px; z-index: 100"
      :style="{
        paddingBottom: tempData.paddingBottom + 'px',
        paddingLeft: tempData.paddingTwice + 'px',
        paddingRight: tempData.paddingTwice + 'px',
        paddingTop: tempData.paddingTop + 'px',
        boxSizing: 'border-box',
      }"
    >
      <img
        :src="tempData.imageUrl"
        style="width: 50px; height: 50px"
        :style="{
          borderTopLeftRadius: tempData.radiusNumTop + 'px',
          borderTopRightRadius: tempData.radiusNumTop + 'px',
          borderBottomLeftRadius: tempData.radiusNumBottom + 'px',
          borderBottomRightRadius: tempData.radiusNumBottom + 'px',
        }"
        alt=""
      />
    </div>
    <div
      class="fixedBox"
      v-if="tempData.position == 3"
      style="position: absolute; top: 100px; right: 20px; z-index: 100"
      :style="{
        paddingBottom: tempData.paddingBottom + 'px',
        paddingLeft: tempData.paddingTwice + 'px',
        paddingRight: tempData.paddingTwice + 'px',
        paddingTop: tempData.paddingTop + 'px',
        boxSizing: 'border-box',
      }"
    >
      <img
        :src="tempData.imageUrl"
        style="width: 50px; height: 50px"
        :style="{
          borderTopLeftRadius: tempData.radiusNumTop + 'px',
          borderTopRightRadius: tempData.radiusNumTop + 'px',
          borderBottomLeftRadius: tempData.radiusNumBottom + 'px',
          borderBottomRightRadius: tempData.radiusNumBottom + 'px',
        }"
        alt=""
      />
    </div>
    <div
      class="fixedBox"
      v-if="tempData.position == 4"
      style="position: absolute; bottom: 100px; right: 20px; z-index: 100"
      :style="{
        paddingBottom: tempData.paddingBottom + 'px',
        paddingLeft: tempData.paddingTwice + 'px',
        paddingRight: tempData.paddingTwice + 'px',
        paddingTop: tempData.paddingTop + 'px',
        boxSizing: 'border-box',
      }"
    >
      <img
        :src="tempData.imageUrl"
        style="width: 50px; height: 50px"
        :style="{
          borderTopLeftRadius: tempData.radiusNumTop + 'px',
          borderTopRightRadius: tempData.radiusNumTop + 'px',
          borderBottomLeftRadius: tempData.radiusNumBottom + 'px',
          borderBottomRightRadius: tempData.radiusNumBottom + 'px',
        }"
        alt=""
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue'

  const props = defineProps({
    // 选中的当前组件参数
    compObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  console.log(props)
  const tempData: any = ref({})
  const steps = ref('3s')
  watch(
    () => props.compObj,
    (newVal, oldVal) => {
      tempData.value = JSON.parse(JSON.stringify(newVal))
    },
    { immediate: true, deep: true }
  )
</script>

<style lang="less" scoped>
  .line {
    width: 100%; /* 线条宽度占满容器 */
    border-top-width: 2px; /* 默认线条厚度 */
    border-style: solid; /* 默认样式 */
  }
  .solid {
    border-style: solid;
  }
  .dashed {
    border-style: dashed;
  }
  .dotted {
    border-style: dotted;
  }
</style>
